@extends('mobile')
@section('style')
    <style>
        .swiper-container {
            width: 100%;
            height: 100%;
        }

        .swiper-slide {
            text-align: center;
            background: #fff;

            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
            float: left;
            font-size: 1rem;
            height: 40px;
            line-height: 40px;
        }
        .button {
            text-align: center;
            padding: 20px;
            background: #093;
            color: #fff;
            font-size: 1.5em;
        }
        .button a{
            color: #fff;;
        }
    </style>
@stop
@section('content')
    <div class="wap_box">

        <div class="swiper-container">
            <div class="swiper-wrapper">
                @foreach($navs[$pageName]['data'] as $nav)
                    <div class="swiper-slide @if($id == $nav->id) hover @endif"><a href="{{url('/mobile/kindeq/'.$nav->id)}}">{{$nav->name}}</a></div>
                @endforeach
            </div>
        </div>
        <div>
            <div class="ask-list">

            </div>
            <p class="button more"><a href="javascript:;">查看更多</a></p>
        </div>
    </div>
@stop
@section('js')

    <script>
        var swiper = new Swiper('.swiper-container', {
            slidesPerView: 3,
            spaceBetween: 0,
            freeMode: true
        });
    </script>

    <script>
        var __url = "{{url('/mobile/kindeqs/'.$id)}}";
        $(function(){
            getList();
            $('.more').on('click',function(){
                getList();
            });
        });
        function getList(){
            $.get(__url,function(data){
                $.each(data.data, function(key,val){
                    var __html = "";
                    __html +="<div class='cnxhd1'><a href='{{url('/mobile/equipment/')}}"+'/'+val.id+"'>";
                    __html +="<p class='spsslb-img1'><img src='/img/equipment-" + val.pic+ "/226-230'></p>";
                    __html +="<p class='cnxhd-dpmc'>"+val.name+"</p></a></div>"
                    $('.ask-list').append(__html);
                });
                if(null == data.next_page_url){
                    $('.more').remove();
                }else{
                    __url = data.next_page_url;
                }
            })
        }
    </script>
@stop